
<template>
  <article class="home">
    <section class="home_header">
        <card style="width:24%">
            <div class="cart_content">
                <i class="iconfont icon-tongji cart_icon"></i>
                <section>
                    <span class="cart_title">访问人数</span>
                    <h1 class="cart_num">40<span class="cart_unit">人</span></h1>
                </section>
            </div>
        </card>
        <card style="width:24%">
            <div class="cart_content">
                <i class="iconfont icon-tongji cart_icon"></i>
                <section>
                    <span class="cart_title">访问人数</span>
                    <h1 class="cart_num">45<span class="cart_unit">人</span></h1>
                </section>
            </div>
        </card>
        <card style="width:24%">
            <div class="cart_content">
                <i class="iconfont icon-tongji cart_icon"></i>
                <section>
                    <span class="cart_title">访问人数</span>
                    <h1 class="cart_num">222223<span class="cart_unit">人</span></h1>
                </section>
            </div>
        </card>
        <card style="width:24%">
            <div class="cart_content">
                <i class="iconfont icon-tongji cart_icon"></i>
                <section>
                    <span class="cart_title">访问人数</span>
                    <h1 class="cart_num">43452<span class="cart_unit">人</span></h1>
                </section>
            </div>
        </card>
    </section>
    <section id="myChart" :style="{width: '100%', height: '300px'}"></section>
  </article>
</template>
<style lang="less" scoped>
@import './index.less';
</style>

<script>
export default {
  mounted () {
    this.drawLine();
  },
  methods: {
    drawLine () {
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        grid: {
          left: 40,
          right:40
        },
        title: { text: '2019年系统访问人数' },
        xAxis: {
          name: '季度',
          axisLabel: {
            rotate: 30
          },
          splitLine: {
            show: false
          },
          data: ['第一季度','第二季度', '第三季度', '第四季度', '第五季度', '第六季度', '第七季度', '第八季度', '第九季度', '第十季度', '第十一季度', '第十二季度']
        },
        yAxis: {
          name: '人次',
          splitLine: {
            show: true
          }
        },
        series: [
          {
            name: '访问人数',
            type: 'bar',
            barMaxWidth: '50%',
            label: {
              show: true,
              position: 'top'
            },
            data: [5, 20, 36, 10, 10, 20, 34, 5, 45, 12, 33, 61]
          },
          {
            name: '增长趋势',
            type: 'line',
            barMaxWidth: '50%',
            label: {
              show: true,
              position: 'top'
            },
            data: [24, 220, 36, 40, 76, 43, 21, 34, 45, 37, 43, 81]
          }
        ]
      });
    }
  }
}
</script>

